<template>
  <div class="groupProduct">
    <el-form
      :model="results"
      :inline="true"
      size="mini"
      ref="ruleForm"
      label-width="100px"
    >
      <div style="margin: 20px">
        <el-form-item label="团类型">
          <el-select v-model="results.groupType" placeholder="请选择">
            <el-option
              v-for="item in groupType"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="团状态">
          <el-select
            size="mini"
            v-model="results.groupStart"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="团名称">
          <el-input v-model="results.groupName"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="results.supplierName"></el-input>
        </el-form-item>
        <el-form-item label="供应商合同号">
          <el-input v-model="results.supplierCount"></el-input>
        </el-form-item>
      </div>
      <div style="margin-top: 20; margin-left: 45%">
        <el-form-item>
          <el-button type="primary" @click="addproduct">新增</el-button>
          <el-button type="primary" @click="viewproduct">查询</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 表格数据 -->
    <el-table
      :data="tableData"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      size="mini"
      border
    >
      <el-table-column prop="countryType" label="团类型" width="150">
        <template slot-scope="scope">
          <template v-if="scope.row.countryType == 'domesticGroup'"
            >国内团</template
          >
          <template v-if="scope.row.countryType == 'foreignMissions'"
            >国外团</template
          >
        </template>
      </el-table-column>
      <el-table-column prop="groupName" label="团名称" width="100">
      </el-table-column>
      <el-table-column prop="localAgentName" label="地接社" width="120">
      </el-table-column>
      <el-table-column
        prop="operationtime"
        label="是否含大交通"
        width="120"
      ></el-table-column>
      <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
      <el-table-column
        prop="contractNumber"
        label="供应商合同号"
      ></el-table-column>
      <!-- <el-table-column prop="operatorName" label="预览"></el-table-column> -->
      <el-table-column prop="groupStatus" label="团状态">
        <template slot-scope="scope">
          <template v-if="scope.row.groupStatus == 'wait'">未上架</template>
          <template v-if="scope.row.groupStatus == 'true'">已上架</template>
          <template v-if="scope.row.groupStatus == 'false'">已下架</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template slot-scope="scope">
          <!-- <el-button v-if="scope.row.groupStatus=='wait' || scope.row.groupStatus=='false'" slot="reference"
            type="primary" size="mini" @click="submit(scope.row)">上架</el-button> -->
          <el-button
            slot="reference"
            type="primary"
            size="mini"
            @click="submit(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
    <!-- 新增 -->
    <el-dialog
      :visible.sync="dialogFormVisible"
      width="96%"
      :close-on-click-modal="false"
    >
      <!-- 新增团  -->
      <el-form
        :inline="true"
        class="demo-form-inline"
        :model="addform"
        :rules="rulesNum"
        ref="addform"
        style="border-bottom: 1px solid #ccc"
      >
        <!-- 新增团 -->
        <div>
          <p style="margin-left: 10px; margin-bottom: 10px; font-size: 18px">
            {{ title }}
          </p>
          <div>
            <el-form-item label="供应商名称:" prop="supplierId">
              <el-select
                @change="supplierIdChange"
                v-model="addform.supplierId"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in upplierList"
                  :key="item.supplierId"
                  :label="item.supplierName"
                  :value="item.supplierId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="供应商合同号:" prop="contractId">
              <el-select
                v-model="addform.contractId"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in tractNumList"
                  :key="item.contractId"
                  :label="item.contractNum"
                  :value="item.contractId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="团类型:" prop="groupType">
              <el-select
                v-model="addform.groupType"
                size="mini"
                placeholder="请选择"
                @change="$forceUpdate()"
              >
                <el-option
                  v-for="item in groupType"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="团名称:" prop="groupName">
              <el-input
                @input="inpChange($event)"
                size="mini"
                v-model="addform.groupName"
              ></el-input>
            </el-form-item>
            <el-form-item label="团号前缀:" prop="groupPrefix">
              <el-input
                @input="inpChange($event)"
                size="mini"
                v-model="addform.groupPrefix"
              ></el-input>
            </el-form-item>
            <el-form-item label="团状态" prop="numberStatus">
              <el-select
                v-model="addform.numberStatus"
                placeholder="请选择"
                @change="$forceUpdate()"
              >
                <el-option
                  v-for="item in optionsList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- <div>
            <el-form-item label="开始时间:" prop="startDate">
              <el-date-picker size="mini" value-format='yyyy-MM-dd HH:mm:ss' v-model="addform.startDate" type="datetime"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结止时间:" prop="enDate">
              <el-date-picker size="mini" value-format='yyyy-MM-dd HH:mm:ss' v-model="addform.enDate" type="datetime"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="价格:" prop="price">
              <el-input size="mini" oninput="value=value.replace(/[^\d.]/g,'')" v-model="addform.price"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="发团时间:" prop="numberTime">
              <el-date-picker size="mini" value-format='yyyy-MM-dd HH:mm:ss' v-model="addform.numberTime"
                type="datetime" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div> -->
        </div>

        <!-- 费用维护 -->
        <div>
          <p style="margin-left: 10px; margin-bottom: 10px; font-size: 18px">
            费用维护
          </p>
          <div>
            <p style="margin-left: 10px; margin-bottom: 10px; font-size: 14px">
              团费：元/人
            </p>
            <el-form-item label="非会员:" prop="groupFee">
              <el-input
                @input="inpChange($event)"
                oninput="value=value.replace(/[^\d.]/g,'')"
                size="mini"
                placeholder="元/人"
                v-model="addform.groupFee"
              ></el-input>
            </el-form-item>
            <el-form-item label="会员:" prop="customerGroupFee">
              <el-input
                @input="inpChange($event)"
                size="mini"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="元/人"
                v-model="addform.customerGroupFee"
              ></el-input>
            </el-form-item>
            <el-form-item label="儿童:" prop="childGroupFee">
              <el-input
                @input="inpChange($event)"
                size="mini"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="元/人"
                v-model="addform.childGroupFee"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="婴儿:" prop="babyGroupFee">
              <el-input
                @input="inpChange($event)"
                size="mini"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="元/人"
                v-model="addform.babyGroupFee"
              ></el-input>
            </el-form-item>
            <el-form-item label="随行:" prop="groupFeeList">
              <el-input
                @input="inpChange($event)"
                size="mini"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="元/人"
                v-model="addform.groupFeeList"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="随行2:" prop="sipUser">
                <el-input size="mini"  placeholder="元/人" v-model="addform.sipUser"></el-input>
              </el-form-item> -->
          </div>
          <div>
            <p style="margin-left: 10px; margin-bottom: 10px; font-size: 14px">
              保证金：元/人
            </p>
            <el-form-item label="非会员:" prop="margin">
              <el-input
                @input="inpChange($event)"
                size="mini"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="元/人"
                v-model="addform.margin"
              ></el-input>
            </el-form-item>
            <el-form-item label="会员:" prop="customerMargin">
              <el-input
                @input="inpChange($event)"
                size="mini"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="元/人"
                v-model="addform.customerMargin"
              ></el-input>
            </el-form-item>
            <el-form-item label="随行:" prop="marginList">
              <el-input
                @input="inpChange($event)"
                size="mini"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="元/人"
                v-model="addform.marginList"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="大交通:" prop="transportation">
              <el-radio-group v-model="addform.transportation">
                <el-radio label="含"></el-radio>
                <el-radio label="不含"></el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="客人违约金：" prop="compensation">
              <el-input
                size="mini"
                @input="inpChange($event)"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="元/起"
                v-model="addform.compensation"
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <!-- 报名规则维护 -->
        <div>
          <div>
            <p style="font-size: 18px; margin: 25px 0px 30px 10px">
              报名规则维护
            </p>
            <el-form-item label="成人" prop="aldultAge">
              <p style="display: flex">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.aldultAge"
                  style="width: 60px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 10px"
                  >岁</span
                >
                <span
                  style="
                    margin-left: 10px;
                    display: inline-block;
                    width: 30px;
                    margin-right: 10px;
                  "
                  >——
                </span>
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.aldultAgeBack"
                  style="width: 60px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 50px"
                  >岁</span
                >
              </p>
            </el-form-item>
            <el-form-item label="团报名人数上限" prop="aldultGroupLimit">
              <p style="display: flex">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.aldultGroupLimit"
                  style="width: 60px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 10px"
                  >人</span
                >
              </p>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="儿童" prop="childAge">
              <p style="display: flex">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.childAge"
                  style="width: 60px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 10px"
                  >岁</span
                >
                <span
                  style="
                    margin-left: 10px;
                    display: inline-block;
                    width: 30px;
                    margin-right: 10px;
                  "
                  >——
                </span>
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.childAgeBack"
                  style="width: 60px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 50px"
                  >岁</span
                >
              </p>
            </el-form-item>
            <el-form-item label="团报名人数上限:" prop="childGroupLimit">
              <p style="display: flex">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.childGroupLimit"
                  style="width: 60px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 10px"
                  >人</span
                >
              </p>
            </el-form-item>
            <el-form-item
              label="单个订单报名人数上限:"
              prop="childOrderLimit"
              style="width: 290px"
            >
              <p style="display: inline-flex">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.childOrderLimit"
                  style="width: 60px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 10px"
                  >人</span
                >
              </p>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="婴儿" prop="babyAge">
              <p style="display: flex">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.babyAge"
                  style="width: 60px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 10px"
                  >岁</span
                >
                <span
                  style="
                    margin-left: 10px;
                    display: inline-block;
                    width: 30px;
                    margin-right: 10px;
                  "
                  >——
                </span>
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.babyAgeBack"
                  style="width: 60px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 50px"
                  >岁</span
                >
              </p>
            </el-form-item>
            <el-form-item label="团报名人数上限:" prop="babyGroupLimit">
              <p style="display: flex">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.babyGroupLimit"
                  style="width: 60px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 10px"
                  >人</span
                >
              </p>
            </el-form-item>
            <el-form-item
              label="单个订单报名人数上限:"
              prop="babyOrderLimit"
              style="width: 290px"
            >
              <p style="display: inline-flex">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.babyOrderLimit"
                  style="width: 60px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 10px"
                  >人</span
                >
              </p>
            </el-form-item>
          </div>
        </div>
        <!-- 优惠政策 -->
        <div>
          <!-- 旅游折扣券使用额度上限规则 -->
          <p
            style="
              font-weight: 900px;
              margin: 25px 0px 30px 10px;
              font-size: 18px;
              color: #000;
            "
          >
            1.旅游折扣券使用额度上限规则
          </p>
          <div style="width: 100%">
            <el-form-item label="会员本人" prop="discount">
              <p style="display: flex; width: 100%">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.discount"
                  style="width: 120px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 10px"
                  >元</span
                >
              </p>
            </el-form-item>
          </div>
          <div style="width: 100%">
            <el-form-item label="随行是否享受优惠" prop="accompanying">
              <el-radio-group v-model="addform.accompanying">
                <el-radio label="true">是</el-radio>
                <el-radio label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="随行政策:" prop="discountList">
              <p style="display: flex">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  v-model="addform.discountList"
                  style="width: 120px"
                  @input="inpChange($event)"
                ></el-input>
                <span
                  style="margin-left: 10px; display: inline-block; width: 10px"
                  >元</span
                >
              </p>
            </el-form-item>
            <!-- <el-form-item label="随行2:" prop="password" style="width:290px;">
                <p style="display:inline-flex">
                  <el-input size="mini" v-model="addform.password" style="width:120px"></el-input>
                  <span style="margin-left:10px;display: inline-block;width: 10px;">元</span>
                </p>
              </el-form-item>
              <el-form-item label="随行3:" prop="password">
                <p style="display:flex">
                  <el-input size="mini" v-model="addform.password" style="width:120px;"></el-input>
                  <span style="margin-left:10px;display: inline-block;width: 10px;">元</span>
                </p>
              </el-form-item> -->
          </div>
          <!-- <div>
                <el-form-item label="随行4:" prop="password" style="width:290px;">
                <p style="display:inline-flex">
                  <el-input size="mini" v-model="addform.password" style="width:120px"></el-input>
                  <span style="margin-left:10px;display: inline-block;width: 10px;">元</span>
                </p>
              </el-form-item>
              <el-form-item label="随行5:" prop="password" style="width:290px;">
                <p style="display:inline-flex">
                  <el-input size="mini" v-model="addform.password" style="width:120px"></el-input>
                  <span style="margin-left:10px;display: inline-block;width: 10px;">元</span>
                </p>
              </el-form-item>
            </div> -->
          <!-- 出行抵扣券优惠政策 -->
          <!-- <p style="font-weight:900px; margin: 25px 0px 30px 10px ;font-size:18px;color: #000;">2.出行抵扣券优惠政策</p>
         <div style="width:100%">
            <el-form-item label="会员本人" prop="password">
              <p style="display:flex;width:100%">
                <el-input size="mini" v-model="addform.aa" style="width:120px"></el-input>
                <span style="margin-left:10px;display: inline-block;width: 10px;">元</span>
              </p>
            </el-form-item>
            <div>
                <el-form-item label="随行1:" prop="password">
                <p style="display:flex">
                  <el-input size="mini" v-model="addform.bb" style="width:120px"></el-input>
                  <span style="margin-left:10px;display: inline-block;width: 10px;">元</span>
                </p>
              </el-form-item>
              <el-form-item label="随行2:" prop="password" style="width:290px;">
                <p style="display:inline-flex">
                  <el-input size="mini" v-model="addform.cc" style="width:120px"></el-input>
                  <span style="margin-left:10px;display: inline-block;width: 10px;">元</span>
                </p>
              </el-form-item>
              <el-form-item label="随行3:" prop="password">
                <p style="display:flex">
                  <el-input size="mini" v-model="addform.dd" style="width:120px;"></el-input>
                  <span style="margin-left:10px;display: inline-block;width: 10px;">元</span>
                </p>
              </el-form-item>
            </div>
            <div>
                    <el-form-item label="随行4:" prop="password" style="width:290px;">
                <p style="display:inline-flex">
                  <el-input size="mini" v-model="addform.ee" style="width:120px"></el-input>
                  <span style="margin-left:10px;display: inline-block;width: 10px;">元</span>
                </p>
              </el-form-item>
              <el-form-item label="随行5:" prop="password" style="width:290px;">
                <p style="display:inline-flex">
                  <el-input size="mini" v-model="addform.ff" style="width:120px"></el-input>
                  <span style="margin-left:10px;display: inline-block;width: 10px;">元</span>
                </p>
              </el-form-item>
            </div> 
           
        </div> -->
        </div>
        <div style="display: flex; justify-content: space-between">
          <!-- 展示给员工 -->
          <div>
            <p
              style="
                font-weight: 900px;
                margin: 25px 0px 30px 10px;
                font-size: 18px;
                color: #000;
              "
            >
              展示给员工
            </p>
            <div>
              <el-form-item label="行程说明">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="resultstwo.itinerary"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="服务标准">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    type="textarea"
                    :rows="1"
                    size="mini"
                    v-model="resultstwo.serviceStandards"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="费用包含项目">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="resultstwo.includeItems"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="费用不包含项目">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="resultstwo.doesNotContain"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="出行须知">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="resultstwo.travelInformation"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="退团机票约定">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="resultstwo.reserve"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="自费景点">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="resultstwo.attractions"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="购物点">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="resultstwo.shopping"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
          </div>
          <!-- 展示给用户 -->
          <div>
            <div style="width: 100%">
              <p
                style="
                  font-weight: 900px;
                  margin: 25px 0px 30px 10px;
                  font-size: 18px;
                  color: #000;
                "
              >
                展示给用户
              </p>
              <el-form-item
                label="旅游图片上传"
                prop="password"
                style="margin-left: 40px; margin-top: 20px"
              >
                <el-upload
                  :on-success="successpickcherone"
                  class="upload-demo"
                  action="/file/fileMapping/uploadTravel"
                  multiple
                  :limit="3"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="行程说明" prop="itinerary">
                <p style="display: flex; width: 100%">
                  <el-input
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="addform.itinerary"
                    @input="inpChange($event)"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="服务标准" prop="serviceStandards">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="addform.serviceStandards"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="费用包含项目" prop="includeItems">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="addform.includeItems"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="费用不包含项目" prop="doesNotContain">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="addform.doesNotContain"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="出行须知" prop="travelInformation">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="addform.travelInformation"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="退团机票约定" prop="reserve">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="addform.reserve"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="自费景点" prop="attractions">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="addform.attractions"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="购物点" prop="shopping">
                <p style="display: flex; width: 100%">
                  <el-input
                    @input="inpChange($event)"
                    size="mini"
                    type="textarea"
                    :rows="1"
                    v-model="addform.shopping"
                  ></el-input>
                </p>
              </el-form-item>
            </div>
          </div>
        </div>
        <hr />
        <h3>团产品具体详情安排</h3>
        <el-form-item label="费用信息" prop="costMessage">
          <el-input
            style="width: 250px"
            @input="inpChange($event)"
            size="mini"
            type="textarea"
            :rows="1"
            v-model="addform.costMessage"
          ></el-input>
        </el-form-item>
        <el-form-item label="接待标准" prop="receptionStandard">
          <el-input
            style="width: 250px"
            @input="inpChange($event)"
            size="mini"
            type="textarea"
            :rows="1"
            v-model="addform.receptionStandard"
          ></el-input>
        </el-form-item>
        <el-form-item label="酒店安排" prop="hotelArrangement">
          <el-input
            style="width: 250px"
            @input="inpChange($event)"
            size="mini"
            type="textarea"
            :rows="1"
            v-model="addform.hotelArrangement"
          ></el-input>
        </el-form-item>
        <el-form-item label="温馨提示" prop="warmPrompt">
          <el-input
            style="width: 250px"
            @input="inpChange($event)"
            size="mini"
            type="textarea"
            :rows="1"
            v-model="addform.warmPrompt"
          ></el-input>
        </el-form-item>

        <hr />
        <div class="gyandbqBox">
          <div>
            <el-button type="primary" @click="gaiyaoBtn()">概要</el-button>
          </div>
          <div>
            <el-button type="primary" @click="biaoqianBtn()">标签</el-button>
          </div>
        </div>
        <hr />
        <div>
          <h3>产品特色</h3>
          <quill-editor
            v-model="productFeature"
            ref="myQuillEditor"
            :options="editorOption"
            @change="onEditorChange($event)"
          >
          </quill-editor>
        </div>
        <hr />
        <div class="travelClass">
          <h3 style="margin: 10px 0 10px 0">行程安排</h3>
          <div class="travelClassBox">
            <div>
              <span>行程概要:</span>
              <el-button type="primary" @click="addtravel()" size="mini"
                >增加</el-button
              >
              <el-table
                :data="travelList"
                :header-cell-style="{
                  color: '#fff',
                  background: '#6090EC',
                  fontSize: '11px',
                  fontWeight: 'normal',
                }"
                size="mini"
                border
                class="account_table"
              >
                <el-table-column label="行程" width="130">
                  <template slot-scope="scope">
                    {{ "第" + (scope.$index + 1) + "天" }}
                  </template>
                </el-table-column>
                <el-table-column label="名称" width="130">
                  <template slot-scope="scope">
                    <el-input
                      type="textarea"
                      v-model="scope.row.travelItineraryName"
                      :rows="1"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      @click="infotrave(scope.row, scope.$index)"
                      size="mini"
                      >详情</el-button
                    >
                    <el-button
                      type="primary"
                      @click="deltrave(scope.row, scope.$index)"
                      size="mini"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div>
              <span>行程详情</span>
              <el-button
                v-if="travelListIndex != ''"
                type="primary"
                @click="addtravelinfo()"
                size="mini"
                >增加</el-button
              >
              <el-table
                v-if="travelListIndex != ''"
                :data="travelList[travelListIndex - 1].itineraryDetailsVoList"
                :header-cell-style="{
                  color: '#fff',
                  background: '#6090EC',
                  fontSize: '11px',
                  fontWeight: 'normal',
                }"
                size="mini"
                border
                class="account_table"
              >
                <el-table-column label="详情名称" width="130">
                  <template slot-scope="scope">
                    <el-input
                      type="textarea"
                      v-model="scope.row.travelItineraryInfoName"
                      :rows="1"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="详情内容" width="130">
                  <template slot-scope="scope">
                    <el-input
                      type="textarea"
                      v-model="scope.row.travelItineraryInfoContent"
                      :rows="1"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="详情描述" width="130">
                  <template slot-scope="scope">
                    <el-input
                      type="textarea"
                      v-model="scope.row.travelItineraryInfoDecs"
                      :rows="1"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="温馨提示" width="130">
                  <template slot-scope="scope">
                    <el-input
                      type="textarea"
                      v-model="scope.row.travelItineraryInfoTips"
                      :rows="1"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      @click="infoImageList(scope.row, scope.$index)"
                      size="mini"
                      >图片</el-button
                    >
                    <el-button
                      type="primary"
                      @click="delInfotrave(scope.row, scope.$index)"
                      size="mini"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div>
              <span>行程图片</span>
              <div v-if="this.infoImageIndex != ''">
                <el-upload
                  action="/file/fileMapping/uploadTravel"
                  list-type="picture-card"
                  :on-success="infoImagehandlePictureCardPreview"
                  :file-list="infoImagehandleList"
                  :on-remove="infoImagehandleRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="infoImagedialogVisible">
                  <img width="100%" :src="infoImagedialogImageUrl" alt="" />
                </el-dialog>
              </div>
            </div>
          </div>
          <!-- <div>
            <el-button type="primary" @click="allinfotrevelBtn()"
              >确定</el-button
            >
          </div> -->
        </div>
        <hr />
        <div>
          <h3>轮播图片</h3>
          <el-upload
            action="/file/fileMapping/uploadTravel"
            list-type="picture-card"
            :on-preview="lunboImghandlePictureCardPreview"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="lunbodialogVisible">
            <img width="100%" :src="lunbodialogImageUrl" alt="" />
          </el-dialog>
        </div>
        <hr />
        <!-- 新增 取消按钮 -->
        <el-form-item>
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="startOtherPlugin('addform')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 概要子弹框 -->
      <el-dialog
        :show-close="false"
        :close-on-click-modal="false"
        width="50%"
        title="概要"
        :visible.sync="gaiyaoVisible"
        append-to-body
      >
        <el-button type="primary" @click="addgaiyao()" size="mini"
          >增加</el-button
        >

        <el-table
          :data="travelItinerarySummaryVoList"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          size="mini"
          border
          class="account_table"
        >
          <el-table-column label="名称" width="130">
            <template slot-scope="scope">
              <el-input
                type="textarea"
                v-model="scope.row.itinerarySummaryName"
                :rows="1"
                size="mini"
                @input="inpChange($event)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="行程概要描述">
            <template slot-scope="scope">
              <el-input
                type="textarea"
                v-model="scope.row.travelItinerarySummaryDesc"
                :rows="1"
                size="mini"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <!-- <el-input type="textarea" v-model="scope.row.itinerarySummaryDesc" :rows="1" size="mini"></el-input> -->
              <div @click="getImageTypeIndex(scope.$index)">
                <el-upload
                  class="avatar-uploader"
                  action="/file/fileMapping/uploadTravel"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                >
                  <img
                    v-if="scope.row.logoUrl"
                    :src="scope.row.logoUrl"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="delgaiyao(scope.row, scope.$index)"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          style="margin-left: 40%"
          @click="gaiyaosureBtn()"
          >确定</el-button
        >
      </el-dialog>
      <!-- 标签子弹框 -->
      <el-dialog
        :show-close="false"
        :close-on-click-modal="false"
        width="50%"
        title="标签"
        :visible.sync="biaoqianVisible"
        append-to-body
      >
        <el-button type="primary" @click="addbiaoqian()" size="mini"
          >增加</el-button
        >
        <el-table
          :data="groupLabelNameList"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          size="mini"
          border
          class="account_table"
        >
          <el-table-column label="名称">
            <template slot-scope="scope">
              <el-input
                type="textarea"
                v-model="scope.row.groupLabelName"
                :rows="1"
                size="mini"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="delbiaoqian(scope.row, scope.$index)"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          style="margin-left: 40%"
          @click="biaoqiansureBtn()"
          >确定</el-button
        >
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "groupProduct",
  data() {
    return {
      // 轮播图片
      lunbodialogImageUrl: "",
      lunbodialogVisible: false,
      // 旅游特色富文本
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [
              {
                size: [
                  "12",
                  "14",
                  "16",
                  "18",
                  "20",
                  "22",
                  "24",
                  "28",
                  "32",
                  "36",
                ],
              },
            ], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["image", "video"], // 链接、图片、视频
          ],
        },
        placeholder: "请输入正文",
      },
      // 特色
      productFeature: "",
      // 行程概要列表
      travelList: [],
      // 主键
      travelListIndex: "",
      // 行程详情列表
      itineraryDetailsVoList: [],

      // 行程图片
      infoImagedialogImageUrl: "",
      infoImagedialogVisible: false,
      infoImagehandleList: [],

      // 行程图片主键显示
      infoImageIndex: "",

      // 概要弹窗
      gaiyaoVisible: false,
      // 概要数组
      travelItinerarySummaryVoList: [],
      // 概要图片标识
      ImageTypeIndex: "",
      // 标签弹窗
      biaoqianVisible: false,
      // 标签数组
      groupLabelNameList: [],
      title: "",
      //查询
      results: {
        groupType: "",
        groupStart: "",
        groupName: "",
        supplierName: "",
        supplierCount: "",
      },
      // 新增团状态
      optionsList: [
        {
          value: "wait",
          label: "待上架",
        },
        {
          value: "false",
          label: "下架",
        },
        {
          value: "true",
          label: "上架",
        },
      ],
      // 合同号列表
      tractNumList: [],
      // 供应商列表
      upplierList: [],
      // 校验所有表单
      formArr: ["rulese", "rulesg"],
      // 用来接受返回数组的结果
      resultArr: [],
      // 表单校验
      rulesNum: {
        supplierId: [
          {
            required: true,
            message: "请选择供应商",
            trigger: "change",
          },
        ],
        groupName: [
          {
            required: true,
            message: "请输入团名称",
            trigger: "blur",
          },
        ],
        contractId: [
          {
            required: true,
            message: "请选择供应商合同",
            trigger: "change",
          },
        ],
        groupType: [
          {
            required: true,
            message: "请选择团类型",
            trigger: "change",
          },
        ],
        groupPrefix: [
          {
            required: true,
            message: "请输入团号前缀",
            trigger: "blur",
          },
        ],
        numberStatus: [
          {
            required: true,
            message: "请选择团状态",
            trigger: "change",
          },
        ],
        // startDate: [{
        //   required: true,
        //   message: '请选择开始时间',
        //   trigger: 'change'
        // }, ],
        // enDate: [{
        //   required: true,
        //   message: '请选择截至时间',
        //   trigger: 'change'
        // }, ],
        // price: [{
        //   required: true,
        //   message: '请输入价格',
        //   trigger: 'blur'
        // }, ],
        // numberTime: [{
        //   required: true,
        //   message: '请选择发团时间',
        //   trigger: 'change'
        // }, ],
        groupFee: [
          {
            required: true,
            message: "请输入非会员团费",
            trigger: "blur",
          },
        ],
        customerGroupFee: [
          {
            required: true,
            message: "请输入会员团费",
            trigger: "blur",
          },
        ],
        childGroupFee: [
          {
            required: true,
            message: "请输入儿童团费",
            trigger: "blur",
          },
        ],
        babyGroupFee: [
          {
            required: true,
            message: "请输入婴儿团费",
            trigger: "blur",
          },
        ],

        margin: [
          {
            required: true,
            message: "请输入非会员保证金",
            trigger: "blur",
          },
        ],
        customerMargin: [
          {
            required: true,
            message: "请输入会员保证金",
            trigger: "blur",
          },
        ],
        marginList: [
          {
            required: true,
            message: "请输入随行保证金",
            trigger: "blur",
          },
        ],
        transportation: [
          {
            required: true,
            message: "请选择大交通",
            trigger: "change",
          },
        ],
        compensation: [
          {
            required: true,
            message: "请输入投诉赔偿",
            trigger: "blur",
          },
        ],
        aldultAge: [
          {
            required: true,
            message: "请输入成人最小年龄",
            trigger: "blur",
          },
        ],
        aldultAgeBack: [
          {
            required: true,
            message: "请输入成人最大年龄",
            trigger: "blur",
          },
        ],
        aldultGroupLimit: [
          {
            required: true,
            message: "请输入成人团上线人数",
            trigger: "blur",
          },
        ],
        childAge: [
          {
            required: true,
            message: "请输入儿童最小年龄",
            trigger: "blur",
          },
        ],
        childAgeBack: [
          {
            required: true,
            message: "请输入儿童最大年龄",
            trigger: "blur",
          },
        ],
        childGroupLimit: [
          {
            required: true,
            message: "请输入儿童团上限",
            trigger: "blur",
          },
        ],
        childOrderLimit: [
          {
            required: true,
            message: "请输入儿童订单上限",
            trigger: "blur",
          },
        ],
        babyAge: [
          {
            required: true,
            message: "请输入婴儿最小年龄",
            trigger: "blur",
          },
        ],
        babyAgeBack: [
          {
            required: true,
            message: "请输入儿童最大年龄",
            trigger: "blur",
          },
        ],
        babyGroupLimit: [
          {
            required: true,
            message: "请输入婴儿团上限",
            trigger: "blur",
          },
        ],
        babyOrderLimit: [
          {
            required: true,
            message: "请输入婴儿订单上限",
            trigger: "blur",
          },
        ],
        discount: [
          {
            required: true,
            message: "请输入会员本人价格",
            trigger: "blur",
          },
        ],
        accompanying: [
          {
            required: true,
            message: "请选择随行是否享受优惠政策",
            trigger: "change",
          },
        ],
        discountList: [
          {
            required: true,
            message: "请输入随行优惠价格",
            trigger: "blur",
          },
        ],

        itinerary: [
          {
            required: true,
            message: "请输入行程说明",
            trigger: "blur",
          },
        ],
        serviceStandards: [
          {
            required: true,
            message: "请输入服务标准",
            trigger: "blur",
          },
        ],
        includeItems: [
          {
            required: true,
            message: "请输入费用包含项目",
            trigger: "blur",
          },
        ],
        doesNotContain: [
          {
            required: true,
            message: "请输入费用不包含项目",
            trigger: "blur",
          },
        ],
        travelInformation: [
          {
            required: true,
            message: "请输入出行须知",
            trigger: "blur",
          },
        ],
        reserve: [
          {
            required: true,
            message: "请输入退团机票预定",
            trigger: "blur",
          },
        ],
        attractions: [
          {
            required: true,
            message: "请输入自费景点",
            trigger: "blur",
          },
        ],
        shopping: [
          {
            required: true,
            message: "请输入购物点",
            trigger: "blur",
          },
        ],
        groupFeeList: [
          {
            required: true,
            message: "请输入随行价格",
            trigger: "blur",
          },
        ],
        costMessage: [
          {
            required: true,
            message: "请输入随行优惠价格",
            trigger: "blur",
          },
        ],
        receptionStandard: [
          {
            required: true,
            message: "请输入随行优惠价格",
            trigger: "blur",
          },
        ],
        hotelArrangement: [
          {
            required: true,
            message: "请输入随行优惠价格",
            trigger: "blur",
          },
        ],
        warmPrompt: [
          {
            required: true,
            message: "请输入随行优惠价格",
            trigger: "blur",
          },
        ],
      },
      // 分页
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,
      dialogFormVisible: false,
      value: "",
      value1: "",
      // 新增展示给员工
      resultstwo: {
        itinerary: "",
        serviceStandards: "",
        includeItems: "",
        doesNotContain: "",
        travelInformation: "",
        reserve: "",
        attractions: "",
        shopping: "",
      },

      // 团类型
      groupType: [
        // {
        //   value: "",
        //   label: "全部"
        // },
        {
          value: "domesticGroup",
          label: "国内团",
        },
        {
          value: "foreignMissions",
          label: "国外团",
        },
      ],
      // 团状态
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "wait",
          label: "等待上架",
        },
        {
          value: "false",
          label: "未上架",
        },
        {
          value: "true",
          label: "已上架",
        },
      ],
      tableData: [],
      addform: {
        //  新增团
        groupType: "",
        groupName: "",
        groupPrefix: "",
        supplierId: null,
        contractId: null,
        startDate: "",
        enDate: "",
        numberStatus: "",
        price: "",
        numberTime: "",
        // 费用维护
        groupFee: null,
        customerGroupFee: null,
        groupFeeList: null,
        childGroupFee: null,
        babyGroupFee: null,
        margin: null,
        customerMargin: null,
        marginList: null,
        transportation: "",
        compensation: null,
        // 报名规则维护
        aldultAge: null,
        aldultAgeBack: null,
        aldultGroupLimit: null,
        childAge: null,
        childAgeBack: null,
        childGroupLimit: null,
        childOrderLimit: null,
        babyAge: null,
        babyAgeBack: null,
        babyGroupLimit: null,
        babyOrderLimit: null,
        // 优惠政策
        discount: null,
        accompanying: "",
        discountList: "",
        // 旅游图片
        url: "",
        // 展示给用户
        itinerary: "",
        serviceStandards: "",
        includeItems: "",
        doesNotContain: "",
        travelInformation: "",
        reserve: "",
        attractions: "",
        shopping: "",
        productFeature: "",
        costMessage: "",
        receptionStandard: "",
        hotelArrangement: "",
        warmPrompt: "",

        // 无需给后台的入参
        aa: "",
        bb: "",
        cc: "",
        dd: "",
        ee: "",
        ff: "",
      }, //新增弹框的整个表单
      rules: {},
      showUser: "", //展示用户的界面
      showStaff: "", //展示用户的界面
      groupId: "",
    };
  },
  methods: {
    // 旅游特色富文本
    onEditorChange(e) {
      console.log(e.html);
    },
    // 行程增加按钮
    addtravel() {
      let obj = {
        travelItineraryName: "",
        itineraryDetailsVoList: [],
      };
      this.travelList.push(obj);
    },
    // 行程详情按钮
    infotrave(row, index) {
      console.log(row);
      this.travelListIndex = index + 1;
      console.log(this.travelListIndex);
    },
    // 行程删除按钮
    deltrave(row, index) {
      this.travelList.splice(index, 1);
      this.travelListIndex = "";
    },

    // 行程详情增加按钮
    addtravelinfo() {
      let obj = {
        travelItineraryInfoName: "",
        travelItineraryInfoContent: "",
        travelItineraryInfoDecs: "",
        travelItineraryInfoTips: "",
        travelItineraryPictureVoList: [],
      };
      this.travelList[this.travelListIndex - 1].itineraryDetailsVoList.push(
        obj
      );
    },

    // 行程删除按钮
    delInfotrave(row, index) {
      this.travelList[this.travelListIndex - 1].itineraryDetailsVoList.splice(
        index,
        1
      );
      if (
        this.travelList[this.travelListIndex - 1].itineraryDetailsVoList
          .length < 1
      ) {
        this.infoImageIndex = "";
      }
    },
    // 所有行程保存按钮
    allinfotrevelBtn() {
      if (this.travelList.length > 0) {
        let a = 0;
        for (let i = 0; i < this.travelList.length; i++) {
          if (this.travelList[i].travelItineraryName == "") {
            this.$message({
              message: "行程概要名称是必填项,请仔细检查",
              type: "warning",
            });
            a = 0;
            break;
          } else {
            if (this.travelList[i].itineraryDetailsVoList.length > 0) {
              for (
                let j = 0;
                j < this.travelList[i].itineraryDetailsVoList.length;
                j++
              ) {
                if (
                  this.travelList[i].itineraryDetailsVoList[j]
                    .travelItineraryInfoName == ""
                ) {
                  this.$message({
                    message: "行程详情名称是必填项,请仔细检查",
                    type: "warning",
                  });
                  a = 0;
                  break;
                } else {
                  a = 1;
                }
              }
            } else {
              a = 0;
              this.$message({
                message: "请点击详情按钮,填写行程详情",
                type: "warning",
              });
            }
          }
        }
        if (a == 1) {
          console.log(this.travelList);
        }
      } else {
        this.$message({
          message: "请添加行程安排",
          type: "warning",
        });
      }
    },
    // 详情图片事件
    infoImagehandleRemove(file, fileList) {
      console.log(file, fileList);

      for (
        let i = 0;
        i <
        this.travelList[this.travelListIndex - 1].itineraryDetailsVoList[
          this.infoImageIndex - 1
        ].travelItineraryPictureVoList.length;
        i++
      ) {
        if (
          file.response[0] ==
          this.travelList[this.travelListIndex - 1].itineraryDetailsVoList[
            this.infoImageIndex - 1
          ].travelItineraryPictureVoList[i].pictureUrl
        ) {
          console.log(i);
          this.travelList[this.travelListIndex - 1].itineraryDetailsVoList[
            this.infoImageIndex - 1
          ].travelItineraryPictureVoList.splice(i, 1);
        }
      }
      console.log(
        this.travelList[this.travelListIndex - 1].itineraryDetailsVoList[
          this.infoImageIndex - 1
        ].travelItineraryPictureVoList
      );
    },
    infoImagehandlePictureCardPreview(res) {
      console.log(res);
      let obj = {
        pictureUrl: "",
      };
      obj.pictureUrl = res[0];
      this.travelList[this.travelListIndex - 1].itineraryDetailsVoList[
        this.infoImageIndex - 1
      ].travelItineraryPictureVoList.push(obj);
      this.dialogVisible = true;
    },
    // 图片按钮
    infoImageList(res, index) {
      console.log(this.infoImagehandleList, res);
      this.infoImagehandleList = [];
      if (res.travelItineraryPictureVoList.length > 0) {
        for (let i = 0; i < res.travelItineraryPictureVoList.length; i++) {
          let url = res.travelItineraryPictureVoList[i].pictureUrl; //url的地址根据项目实际需要，info.photo=>图片路径,this.baseUrl=>上传的网络地址
          this.infoImagehandleList.push({
            url: url,
          });
        }
      }
      console.log(res, index);
      this.infoImageIndex = index + 1;
    },
    // 概要按钮
    gaiyaoBtn() {
      this.gaiyaoVisible = true;
    },
    // 概要新增按钮
    addgaiyao() {
      let obj = {
        itinerarySummaryName: "", //名称
        itinerarySummaryDesc: "", //描述
        logoUrl: "", //图片地址
      };
      this.travelItinerarySummaryVoList.push(obj);
    },
    // 概要删除按钮
    delgaiyao(row, index) {
      console.log(row, this.travelItinerarySummaryVoList, index);
      this.travelItinerarySummaryVoList.splice(index, 1);
    },
    // 概要确定按钮
    gaiyaosureBtn() {
      if (this.travelItinerarySummaryVoList.length > 0) {
        let clos = 1;
        for (let i = 0; i < this.travelItinerarySummaryVoList.length; i++) {
          if (this.travelItinerarySummaryVoList[i].itinerarySummaryName == "") {
            this.$message({
              message: "概要名称是必填项",
              type: "warning",
            });
            clos = 1;
            break;
          } else {
            clos = 0;
          }
        }
        if (clos == 0) {
          this.gaiyaoVisible = false;
        }
      } else {
        this.gaiyaoVisible = false;
      }
    },
    // 概要图片上传
    handleAvatarSuccess(res) {
      console.log(res);
      console.log(this.travelItinerarySummaryVoList);
      this.travelItinerarySummaryVoList[this.ImageTypeIndex].logoUrl = res[0];
    },
    getImageTypeIndex(index) {
      this.ImageTypeIndex = index;
      console.log(index);
    },
    // 标签按钮
    biaoqianBtn() {
      this.biaoqianVisible = true;
    },

    // 标签新增按钮
    addbiaoqian() {
      let obj = {
        groupLabelName: "", //名称
      };
      this.groupLabelNameList.push(obj);
    },
    // 标签删除按钮
    delbiaoqian(row, index) {
      console.log(row, this.groupLabelNameList, index);
      this.groupLabelNameList.splice(index, 1);
    },
    // 标签确定按钮
    biaoqiansureBtn() {
      if (this.groupLabelNameList.length > 0) {
        let clos = 0;
        for (let i = 0; i < this.groupLabelNameList.length; i++) {
          if (this.groupLabelNameList[i].groupLabelName == "") {
            this.$message({
              message: "标签名称是必填项",
              type: "warning",
            });
            clos = 1;
            break;
          } else {
            clos = 0;
          }
        }
        if (clos == 0) {
          this.biaoqianVisible = false;
        }
      } else {
        this.biaoqianVisible = false;
      }
    },
    // 轮播图片
    lunboImghandlePictureCardPreview() {},
    // 新增团产品接口
    getinsertProduct() {
      localStorage.setItem("isToken", true);
      if (
        this.resultstwo.itinerary != "" &&
        this.resultstwo.serviceStandards != "" &&
        this.resultstwo.includeItems != "" &&
        this.resultstwo.doesNotContain != "" &&
        this.resultstwo.travelInformation != "" &&
        this.resultstwo.reserve != "" &&
        this.resultstwo.attractions != "" &&
        this.resultstwo.shopping != ""
      ) {
        if (this.travelList.length > 0) {
          let a = 0;
          for (let i = 0; i < this.travelList.length; i++) {
            if (this.travelList[i].travelItineraryName == "") {
              this.$message({
                message: "行程概要名称是必填项,请仔细检查",
                type: "warning",
              });
              a = 0;
              break;
            } else {
              if (this.travelList[i].itineraryDetailsVoList.length > 0) {
                for (
                  let j = 0;
                  j < this.travelList[i].itineraryDetailsVoList.length;
                  j++
                ) {
                  if (
                    this.travelList[i].itineraryDetailsVoList[j]
                      .travelItineraryInfoName == ""
                  ) {
                    this.$message({
                      message: "行程详情名称是必填项,请仔细检查",
                      type: "warning",
                    });
                    a = 0;
                    break;
                  } else {
                    a = 1;
                  }
                }
              } else {
                a = 0;
                this.$message({
                  message: "请点击详情按钮,填写行程详情",
                  type: "warning",
                });
              }
            }
          }
          if (a == 1) {
            console.log(this.travelList);
            let groupLabelNameListagin = [];

            this.$axios
              .getinsertProduct({
                insertGroupVo: {
                  groupType: this.addform.groupType,
                  groupName: this.addform.groupName,
                  groupPrefix: this.addform.groupPrefix,
                  supplierId: Number(this.addform.supplierId),
                  contractId: Number(this.addform.contractId),
                  startDate: this.addform.startDate,
                  enDate: this.addform.enDate,
                  groupStatus: this.addform.numberStatus,
                  // numberStatus:0,
                  price: this.addform.price,
                  numberTime: this.addform.numberTime,
                },
                costMaintenance: {
                  groupFee: Number(this.addform.groupFee),
                  customerGroupFee: Number(this.addform.customerGroupFee),
                  groupFeeList: [Number(this.addform.groupFeeList)],
                  childGroupFee: Number(this.addform.childGroupFee),
                  babyGroupFee: Number(this.addform.babyGroupFee),
                  margin: Number(this.addform.margin),
                  customerMargin: Number(this.addform.customerMargin),
                  marginList: Number(this.addform.marginList),
                  transportation: this.addform.transportation,
                  compensation: Number(this.addform.compensation),
                },
                ruleMaintenance: {
                  aldultAge: Number(this.addform.aldultAge),
                  aldultAgeBack: Number(this.addform.aldultAgeBack),
                  aldultGroupLimit: Number(this.addform.aldultGroupLimit),
                  childAge: Number(this.addform.childAge),
                  childAgeBack: Number(this.addform.childAgeBack),
                  childGroupLimit: Number(this.addform.childGroupLimit),
                  childOrderLimit: Number(this.addform.childOrderLimit),
                  babyAge: Number(this.addform.babyAge),
                  babyAgeBack: Number(this.addform.babyAgeBack),
                  babyGroupLimit: Number(this.addform.babyGroupLimit),
                  babyOrderLimit: Number(this.addform.babyOrderLimit),
                },
                preferentialPolicies: {
                  discount: Number(this.addform.discount),
                  accompanying: this.addform.accompanying,
                  discountList: [Number(this.addform.discountList)],
                },
                userExhibit: {
                  itinerary: this.addform.itinerary,
                  serviceStandards: this.addform.serviceStandards,
                  includeItems: this.addform.includeItems,
                  doesNotContain: this.addform.doesNotContain,
                  travelInformation: this.addform.travelInformation,
                  reserve: this.addform.reserve,
                  attractions: this.addform.attractions,
                  shopping: this.addform.shopping,
                },
                staffExhibit: {
                  itinerary: this.resultstwo.itinerary,
                  serviceStandards: this.resultstwo.serviceStandards,
                  includeItems: this.resultstwo.includeItems,
                  doesNotContain: this.resultstwo.doesNotContain,
                  travelInformation: this.resultstwo.travelInformation,
                  reserve: this.resultstwo.reserve,
                  attractions: this.resultstwo.attractions,
                  shopping: this.resultstwo.shopping,
                  productFeature: this.productFeature,
                  costMessage: this.costMessage,
                  receptionStandard: this.receptionStandard,
                  hotelArrangement: this.hotelArrangement,
                  warmPrompt: this.warmPrompt,
                },
                schedule: this.travelList,
                groupLabelNameList: this.groupLabelNameList,
                travelItinerarySummaryVoList: this.travelItinerarySummaryVoList,
                url: this.addform.url,
              })
              .then((res) => {
                
                console.log(res);
                if (res.code == 200) {
                  this.postproductList();
                  this.dialogFormVisible = false;
                }
              });
          }
        } else {
          this.$message({
            message: "请添加行程安排",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请输入展示给员工多有内容！！！",
          type: "warning",
        });
      }
    },
    // 修改团产品接口
    geteditGroup() {
      localStorage.setItem("isToken", true);
      if (
        this.resultstwo.itinerary != "" &&
        this.resultstwo.serviceStandards != "" &&
        this.resultstwo.includeItems != "" &&
        this.resultstwo.doesNotContain != "" &&
        this.resultstwo.travelInformation != "" &&
        this.resultstwo.reserve != "" &&
        this.resultstwo.attractions != "" &&
        this.resultstwo.shopping != ""
      ) {
        this.$axios
          .geteditGroup({
            groupId: this.groupId,
            groupName: this.addform.groupName,
            groupFee: this.addform.groupFee,
            supplierId: this.addform.supplierId,
            countryType: this.addform.groupType,
            aduCount: this.addform.aldultGroupLimit,
            groupStatus: this.addform.numberStatus,
            tourItinerary: this.resultstwo.itinerary,
            serviceStandard: this.resultstwo.serviceStandards,
            feeContain: this.resultstwo.includeItems,
            feeNoContain: this.resultstwo.doesNotContain,
            travelNotes: this.resultstwo.travelInformation,
            flightRefundRule: this.resultstwo.reserve,
            shopPlace: this.resultstwo.attractions,
            feeNoCoshopPlacentain: this.resultstwo.shopping,
            userTourItinerary: this.addform.itinerary,
            userServiceStandard: this.addform.serviceStandards,
            userFeeContain: this.addform.includeItems,
            userFeeNoContain: this.addform.doesNotContain,
            userTravelNotes: this.addform.travelInformation,
            userFlightRefundRule: this.addform.reserve,
            userOwnFeePlaceInfo: this.addform.attractions,
            userShopPlace: this.addform.shopping,
            vipGroupFee: this.addform.customerGroupFee,
            chdFee: this.addform.childGroupFee,
            infFee: this.addform.babyGroupFee,
            groupFeeList: this.addform.guestGroupFee,
            cashPledge: this.addform.margin,
            vipCashPledge: this.addform.customerMargin,
            guestCashPledge: this.addform.marginList,
            complaintFee: this.addform.compensation,
            aduAgeStart: this.addform.aldultAge,
            aduAgeEnd: this.addform.aldultAgeBack,
            chdAgeStart: this.addform.childAge,
            chdAgeEnd: this.addform.childAgeBack,
            chdCount: this.addform.childGroupLimit,
            chdOrderCount: this.addform.childOrderLimit,
            infAgeStart: this.addform.babyAge,
            infAgeEnd: this.addform.babyAgeBack,
            infCount: this.addform.babyGroupLimit,
            infOrderCount: this.addform.babyOrderLimit,
            vipDiscountUsed: this.addform.discount,
            infOrderCount: this.addform.discountList,
            productFeature: this.productFeature,
            costMessage: this.addform.costMessage,
            receptionStandard: this.addform.receptionStandard,
            hotelArrangement: this.addform.hotelArrangement,
            warmPrompt: this.addform.warmPrompt,
            schedule: this.travelList,
            groupLabelNameList: this.groupLabelNameList,
            travelItinerarySummaryVoList: this.travelItinerarySummaryVoList,
            groupBanner: this.addform.url,
          })
          .then((res) => {
            
            console.log(res);
            if (res.code == 200) {
              this.clearfromDate();
              this.postproductList();
              this.dialogFormVisible = false;
              this.$message({
                message: "修改成功",
                type: "success",
              });
            }
          });
      } else {
        this.$message({
          message: "请输入展示给员工多有内容！！！",
          type: "warning",
        });
      }
    },
    // 图片上传成功
    successpickcherone(row) {
      console.log(row);
      this.addform.url = row[0];
      // this.workOrderContentVo.documentVoList[0].url = row[0];
      // console.log(this.workOrderContentVo.documentVoList);
    },
    // 列表数据
    postproductList() {
      this.$axios.postproductList(this.results).then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.pageTotal = res.total;
      });
    },
    // 新增按钮
    addproduct() {
      this.travelListIndex = "";
      this.infoImageIndex = "";
      this.groupId = "";
      this.title = "新增团";
      this.dialogFormVisible = true;
      this.clearfromDate();
      this.travelList = [];
    },
    // 查询按钮
    viewproduct() {
      this.postproductList();
    },
    startOtherPlugin(formName) {
      console.log(formName);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.groupId == "") {
            this.getinsertProduct();
          } else {
            this.geteditGroup();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改
    submit(row) {
      this.title = "修改团";
      this.addform = {};
      this.dialogFormVisible = true;
      // this.groupNumbera = row.groupNumber
      console.log(row);
      this.groupId = row.groupId;
      this.$axios
        .gettravelProductDetails({
          groupId: row.groupId,
        })
        .then((res) => {
          if (res.code == 200) {
            this.addform = res.data;
            this.addform.supplierId = res.data.supplierId;
            this.addform.groupType = res.data.countryType;
            this.addform.groupPrefix = res.data.countryType;
            this.addform.aldultGroupLimit = res.data.aduCount;
            this.addform.numberStatus = res.data.groupStatus;
            this.resultstwo.itinerary = res.data.tourItinerary;
            this.resultstwo.serviceStandards = res.data.serviceStandard;
            this.resultstwo.includeItems = res.data.feeContain;
            this.resultstwo.doesNotContain = res.data.feeNoContain;
            this.resultstwo.travelInformation = res.data.travelNotes;
            this.resultstwo.reserve = res.data.flightRefundRule;
            this.resultstwo.attractions = res.data.ownFeePlaceInfo;
            this.resultstwo.shopping = res.data.shopPlace;
            this.addform.itinerary = res.data.userTourItinerary;
            this.addform.serviceStandards = res.data.userServiceStandard;
            this.addform.includeItems = res.data.userFeeContain;
            this.addform.doesNotContain = res.data.userFeeNoContain;
            this.addform.travelInformation = res.data.userTravelNotes;
            this.addform.reserve = res.data.userFlightRefundRule;
            this.addform.attractions = res.data.userOwnFeePlaceInfo;
            this.addform.shopping = res.data.userShopPlace;
            this.addform.customerGroupFee = res.data.vipGroupFee;
            this.addform.childGroupFee = res.data.chdFee;
            this.addform.babyGroupFee = res.data.infFee;
            this.addform.groupFeeList = res.data.guestGroupFee;
            this.addform.margin = res.data.cashPledge;
            this.addform.customerMargin = res.data.vipCashPledge;
            this.addform.marginList = res.data.guestCashPledge;
            this.addform.compensation = res.data.complaintFee;
            this.addform.aldultAge = res.data.aduAgeStart;
            this.addform.aldultAgeBack = res.data.aduAgeEnd;
            this.addform.childAge = res.data.chdAgeStart;
            this.addform.childAgeBack = res.data.chdAgeEnd;
            this.addform.childGroupLimit = res.data.chdCount;
            this.addform.childOrderLimit = res.data.chdOrderCount;
            this.addform.babyAge = res.data.infAgeStart;
            this.addform.babyAgeBack = res.data.infAgeEnd;
            this.addform.babyGroupLimit = res.data.infCount;
            // this.addform.babyOrderLimit = res.data.infOrderCount;
            this.addform.discount = res.data.vipDiscountUsed;
            this.addform.discountList = res.data.infOrderCount;
            this.productFeature = res.data.productFeature;
            this.addform.costMessage = res.data.costMessage;
            this.addform.receptionStandard = res.data.receptionStandard;
            this.addform.hotelArrangement = res.data.hotelArrangement;
            this.addform.warmPrompt = res.data.warmPrompt;
            this.travelList = res.data.schedule;
            this.groupLabelNameList = res.data.groupLabelNameList;
            this.travelItinerarySummaryVoList =
              res.data.travelItinerarySummaryVoList;
            if (res.data.guestDiscountUsed == "") {
              this.addform.accompanying = "false";
            } else {
              this.addform.accompanying = "true";
            }
            for (let i = 0; i < this.travelItinerarySummaryVoList.length; i++) {
              this.travelItinerarySummaryVoList[i].itinerarySummaryName =
                this.travelItinerarySummaryVoList[i].travelItinerarySummaryName;
            }
          }
        });
    },
    clearfromDate() {
      this.addform.supplierId = "";
      this.addform.groupName = "";
      this.addform.groupFee = "";
      this.addform.groupType = "";
      this.addform.groupPrefix = "";
      this.addform.aldultGroupLimit = "";
      this.addform.numberStatus = "";
      this.resultstwo.itinerary = "";
      this.resultstwo.serviceStandards = "";
      this.resultstwo.includeItems = "";
      this.resultstwo.doesNotContain = "";
      this.resultstwo.travelInformation = "";
      this.resultstwo.reserve = "";
      this.resultstwo.attractions = "";
      this.resultstwo.shopping = "";
      this.addform.itinerary = "";
      this.addform.serviceStandards = "";
      this.addform.includeItems = "";
      this.addform.doesNotContain = "";
      this.addform.travelInformation = "";
      this.addform.reserve = "";
      this.addform.attractions = "";
      this.addform.shopping = "";
      this.addform.customerGroupFee = "";
      this.addform.childGroupFee = "";
      this.addform.babyGroupFee = "";
      this.addform.groupFeeList = "";
      this.addform.margin = "";
      this.addform.customerMargin = "";
      this.addform.marginList = "";
      this.addform.compensation = "";
      this.addform.aldultAge = "";
      this.addform.aldultAgeBack = "";
      this.addform.childAge = "";
      this.addform.childAgeBack = "";
      this.addform.childGroupLimit = "";
      this.addform.childOrderLimit = "";
      this.addform.babyAge = "";
      this.addform.babyAgeBack = "";
      this.addform.babyGroupLimit = "";
      this.addform.babyOrderLimit = "";
      this.addform.discount = "";
      this.addform.discountList = "";
    },
    supplierIdChange() {
      this.addform.contractId = "";
      this.getcontractNum();
    },
    // 合同号列表
    getcontractNum() {
      this.$axios
        .getcontractNum({
          supplierId: this.addform.supplierId,
        })
        .then((res) => {
          console.log(res);
          this.tractNumList = res.data;
        });
    },
    // 供应商列表
    getgroupSupplierList() {
      this.$axios.getgroupSupplierList().then((res) => {
        console.log(res);
        this.upplierList = res.data;
      });
    },
    //分页
    handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.postproductList();
      this.pageSize = value;
    },
    handleCurrentChange(value) {
      console.log("2", value);

      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.postproductList();
      // orders = res.data;
    },
    inpChange(e) {
      this.$forceUpdate();
    },
  },
  mounted() {
    this.postproductList();
    // 供应商名称列表
    this.getgroupSupplierList();
    // 合同号列表
    // this.getcontractNum();
  },
};
</script>

<style scoped>
.el-form-item {
  width: 350px;
  margin-left: 25px;
}

#description .el-form-item__label {
  text-align: right;
  width: 120px;
  margin-right: 15px;
}
.gyandbqBox {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}

.travelClassBox {
  display: flex;
}
.travelClassBox > div {
  width: 33%;
  min-height: 300px;
}
</style>